<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        html,body{
            height: 100%;
        }
        body{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            background-color: rgb(238, 238, 238);
        }
        header{
            line-height: 50px;
            font-size: 20px;
            font-weight: 700;
            padding: 0 10px;
        }
        section{
            flex: 1;
            padding: 0 10px;
        }
        section #goods{
            background-color: white;
            padding: 0 10px;
            border-radius: 10px;
        }
        section #goods .title{
            line-height: 40px;
        }
        section #goods .item{
            margin: 5px 0;
            border-radius: 10px;
            display: flex;
            align-items: center;
            position: relative;
        }
        section #goods .item .center{
            margin-left: 10px;
        }
        section #goods .item .center .name{
            font-size: 14px;
            font-weight: 700;
        }
        section #goods .item .center .intro{
            font-size: 12px;
            color: red;
        }
        section #goods .item .center p{
            font-size: 12px;
            color:#ccc;
            margin-top: 5px;
        }
        section #goods .item .right{
            float: right;
            position: absolute;
            right: 15px;
        }
        section #goods .item .right button{
            padding: 2px 10px;
            border-radius: 20px;
            border: none;
            background-color:orangered;
            color: white;
        }
        footer{
            line-height: 60px;
            display: flex;
            justify-content: space-around;
            background-color: white;
        }
    </style>
</head>

<body>
    <header>&lt; 饿了么</header>
    <section>
        <div id="goods">
            <div class="title">热门单品</div>
            <div class="item" v-for="(item,index) in goodslist">
                <div class="left">
                    <img v-bind:src="item.pic" alt="">
                </div>
                <div class="center">
                    <div class="name">{{item.name}}</div>
                    <div class="intro">{{item.intro}}</div>
                    <div class="much">🔥{{item.much}}</div>
                    <p>适用门店 &gt;</p>
                </div>
                <div class="right">
                    <button>立即兑</button>
                </div>
            </div>
        </div>
    </section>
    <footer>
        <div>首页</div>
        <div>吃货卡</div>
        <div>订单</div>
        <div>我的</div>
    </footer>
</body>

</html>
<script src="./vue-2.5.21.js"></script>
<script>

    new Vue({
        el: '#goods',
        data: {
            goodslist: [
                { id: 1, pic: './img/org1.png', name: '脐橙3斤 快递到家', intro: '兑换后入手价8.9元', much: 10 },
                { id: 1, pic: './img/org2.png', name: '耙耙相2斤 快递到家', intro: '兑换后入手价9.9元', much: 30 },
                { id: 1, pic: './img/org3.png', name: '水果捞350g', intro: '兑换后入手价6.9元', much: 60 },
            ]
        }
    })

</script>